<template>
    <div class="user-group">
        <div class="user-group-card">
            <div class="user-group-head-btn">
                <router-link :to="{name:'add-group-nocache'}">
                    <Button type="primary" class="btn"><Icon type="plus-round"></Icon> 新增用户组</Button>
                </router-link>
            </div>
            <i-table height="780" stripe :columns="columns" :data="data"></i-table>
        </div>
        <!--弹出权限-->
        <Modal v-model="modal2" width="500">
            <p slot="header" style="color:#f60;text-align:center">
                <a><Icon type="key"></Icon></a>
                <a> 查看权限</a>
            </p>
            <Tree ref="treeRef" :data="treeList" show-checkbox></Tree>
            <!--<CheckboxGroup v-model="checkAllGroup">
                <template  v-for="(value,key) in menuList">
                    <Checkbox size="large" :label="key+1" style="padding: 10px 0px">{{value.title}}</Checkbox>
                    <br/>
                </template>
            </CheckboxGroup>-->
            <div slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading" @click="sureAccess">确定</Button>
            </div>
        </Modal>
        <Modal v-model="modal3" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <a>修改名称</a>
            </p>
            <div class="administrators-list-formCon">
                <!--表单-->
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="70">
                    <FormItem style="margin-top:40px; " label="用户组名"  prop="name">
                        <Input clearable v-model="formValidate.name" placeholder="请输入用户组名"></Input>
                    </FormItem>
                </Form>
                <!--/表单-->
            </div>
            <div slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading" @click="sureAdd">确定</Button>
            </div>
        </Modal>
        <Modal v-model="modal4" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <a>删除</a>
            </p>
            <div style="text-align:center">
                <p>确定删除?</p>
            </div>
            <div slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading" @click="sureDel">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "user-group",
        data(){
            return{
                columns:[
                    {
                        title: 'ID',
                        key: 'id',
                        align:"center",
                    },
                    {
                        title: '名称',
                        key: 'title',
                        align:"center",
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('ButtonGroup', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                    },
                                    on: {
                                        click: () => {
                                            this.getAccess(params.row.id)
                                        }
                                    }
                                },"查看权限"),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                    },
                                    on: {
                                        click: () => {
                                            this.groupid=params.row.id
                                            this.formValidate.name=""
                                            this.modal3=true
                                        }
                                    }
                                },"修改名称"),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                    },
                                    on: {
                                        click: () => {
                                            this.groupid=params.row.id
                                            this.modal4=true
                                        }
                                    }
                                },"删除"),
                            ]);
                        }
                    },
                ],
                data:[],
                modal2:false,
                modal_loading:false,
                accessList:[],
                groupid:"",
                modal3:false,
                formValidate:{
                    name:"",
                },
                ruleValidate:{
                    name: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                },
                modal4:false,
                checkAllGroup:[],
                treeList: []
            }
        },
        computed:{
            menuList () {
                return this.$store.state.app.menuList;
            },
        },
        mounted(){
            this.getList()
        },
        methods:{
            //获取列表数据
            getList(){
                this.getJsonData("Auth/getGroup")
                    .then((res)=>{
                        this.data=res.group
                    })
            },
            //查看权限
            getAccess(groupid){
                this.groupid=groupid
                this.accessList=[]
                this.getJsonData("Auth/getGroupDetail",{id:groupid})
                    .then((res)=>{
                        this.treeList = res.data;
                        // this.checkAllGroup = res.data;
                        this.modal2=true
                    })
            },
            sureAccess(){
                this.accessList = this.$refs.treeRef.getCheckedNodes().map(item =>item.id);
                this.modal_loading=true;
                this.getJsonData("Auth/changeGroup",{id:this.groupid,rule:this.accessList.join(",")},true)
                    .then((res)=>{
                        this.modal_loading=false;
                        this.modal2=false;
                        this.$Message.success(res.msg)
                    })
                    .catch(()=>{
                        this.modal_loading=false;
                    })
            },
            //新增用户组
            sureAdd(){
                this.$refs.formValidate.validate((valid) => {
                    if (valid) {
                        this.sureAddPeople()
                    } else {
                        //不做处理
                    }
                })
            },
            sureAddPeople(){
                this.modal_loading=true;
                this.getJsonData("Auth/changeGroup",{
                    id:this.groupid,
                    title:this.formValidate.name,
                },true).then((res)=>{
                    this.modal_loading=false;
                    this.modal3=false;
                    this.$Message.success(res.msg)
                    this.getList()
                }).catch((res)=>{
                    this.modal_loading=false;
                })
            },
            sureDel(){
                this.modal_loading=true;
                this.getJsonData("Auth/deleteGroup",{
                    id:this.groupid,
                },true).then((res)=>{
                    this.modal_loading=false;
                    this.modal4=false;
                    this.$Message.success(res.msg)
                    this.getList()
                }).catch((res)=>{
                    this.modal_loading=false;
                })
            }
        }
    }
</script>

<style lang="less">
    @import "./user-group";
</style>
